<template>
<div>
  <div class="tooltip" id="mapTooltip"></div>
 <div class="container">
    <div class="map-chart" id="mapChart">
      map
    </div>
  </div>
</div>
 
</template>

<script>
import axios from "axios"
import Map from "../assets/scripts/charts/map"
export default {
  async mounted() {
    let result = await axios.get("/api/map/dot")
     let config = {
      width:1800,
      height:1400
    }
    var map = new Map("#mapChart", config)
    console.log("map data:", result.data.list)
    map.render(result.data.list)
  }
}
</script>

<style lang="scss" scoped>
.container{
  position: absolute;
  top:200px;
  left:650px;
}
.tooltip{
  position: absolute;
  font-size: 50px;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  background: rgba(60,60,60 ,0.8);
  display: none;
  z-index: 1000;
}
</style>


